<!DOCTYPE html>
<html lang="" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    
    <!--    <link rel="stylesheet" href="./reset.css"/>-->
    <link type="text/css" rel="stylesheet" href="/css/player.css">
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=781ade13f07db0e941380ba034fcdf83" type="text/javascript"></script>
    <script type="text/javascript" src="/config.js"></script>
    <script type="text/javascript" src="/script/adapter-latest.js"></script>
    <script type="text/javascript" src="/script/webRtcPlayer.js"></script>
    <script type="text/javascript" src="/script/app.js"></script>
<!--    <script src="jquery-1.7.1.min.js"></script>-->
    <link rel="stylesheet" href="./static/WSPlayer/player.css">
    <script type="text/javascript" src="./static/WSPlayer/PlayerControl.js"></script>
    <script type="text/javascript" src="./static/WSPlayer/WSPlayer.js"></script>
    <script type="text/javascript" src="./static/jquery-3.6.0.min.js"></script>
    <title>上海庙经济开发区智慧园区IOC运营中心</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-size: cover;
            user-select: none;
        }

        #playerUI {
            padding: 0px;
            margin: 0px;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            z-index: 1;
        }

        #app {
            position: absolute;
            z-index: 2;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        ul, li {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }

    </style>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>
<div>
    <div id="playerUI">
        <div id="player"></div>

        <div style="display:none">
            <div id="qualityStatus" class="greyStatus">&#9679</div>
            <div id="overlayButton">+</div>
        </div>
        <div style="display:none" id="overlaySettings">
            <div id="KickOthers">
                <div class="settings-text">Kick all other players</div>
                <label class="btn-overlay">
                    <input type="button" id="kick-other-players-button" class="overlay-button btn-flat" value="Kick">
                </label>
            </div>
            <div id="FillWindow">
                <div class="settings-text">Enlarge Display to Fill Window</div>
                <label class="tgl-switch">
                    <!-- input type="checkbox" id="enlarge-display-to-fill-window-tgl" class="tgl tgl-flat" checked>
                    <div class="tgl-slider"></div -->
                </label>
            </div>
            <div id="QualityControlOwnership">
                <div class="settings-text">Quality control ownership</div>
                <label class="tgl-switch">
                    <input type="checkbox" id="quality-control-ownership-tgl" class="tgl tgl-flat">
                    <div class="tgl-slider"></div>
                </label>
            </div>
            <div id="EncoderSettings">
                <div class="settings-text">Encoder Settings</div>
                <div id="encoderParamsContainer" class="collapse">
                    <div class="form-group">
                        <label for="encoder-rate-control" class="settings-text">Rate Control</label>
                        <select id="encoder-rate-control">
                            <option value="CBR" selected>CBR</option>
                            <option value="VBR">VBR</option>
                            <option value="ConstQP">ConstQP</option>
                        </select><br>
                        <label for="encoder-target-bitrate-text">Target Bitrate (kbps)</label>
                        <input type="number" class="form-control" id="encoder-target-bitrate-text" value="0" min="0"
                               max="100000"/><br>
                        <label for="encoder-max-bitrate-text">Max Bitrate (kbps)</label>
                        <input type="number" class="form-control" id="encoder-max-bitrate-text" value="0" min="0"
                               max="100000"/><br>
                        <label for="encoder-min-qp-text">Min QP</label>
                        <input type="number" class="form-control" id="encoder-min-qp-text" value="0" min="0" max="999"/><br>
                        <label for="encoder-max-qp-text">Max QP</label>
                        <input type="number" class="form-control" id="encoder-max-qp-text" value="0" min="0" max="999"/><br>
                        <div class="settings-text">Filler Data</div>
                        <label class="tgl-switch">
                            <input type="checkbox" id="encoder-filler-data-tgl" class="tgl tgl-flat">
                            <div class="tgl-slider"></div>
                        </label><br>
                        <label for="encoder-multipass" class="settings-text">Multipass</label>
                        <select id="encoder-multipass">
                            <option value="DISABLED" selected>DISABLED</option>
                            <option value="QUARTER">QUARTER</option>
                            <option value="FULL">FULL</option>
                        </select><br>
                        <input id="encoder-params-submit" class="btn btn-primary btn-lg mt-3" type="button"
                               value="Apply">
                    </div>
                </div>
            </div>
            <div id="WebRTCSettings">
                <div class="settings-text">WebRTC Settings</div>
                <div id="webrtcParamsContainer" class="collapse">
                    <div class="form-group">
                        <label for="webrtc-degradation-pref">Degradation Pref</label>
                        <select id="webrtc-degradation-pref">
                            <option value="BALANCED">BALANCED</option>
                            <option value="MAINTAIN_FRAMERATE">MAINTAIN_FRAMERATE</option>
                            <option value="MAINTAIN_RESOLUTION">MAINTAIN_RESOLUTION</option>
                        </select><br>
                        <label for="webrtc-max-fps-text">Max FPS</label>
                        <input type="number" class="form-control" id="webrtc-max-fps-text" value="1" min="1" max="999"/><br>
                        <label for="webrtc-min-bitrate-text">Min Bitrate (kbps)</label>
                        <input type="number" class="form-control" id="webrtc-min-bitrate-text" value="0" min="0"
                               max="100000"/><br>
                        <label for="webrtc-max-bitrate-text">Max Bitrate (kbps)</label>
                        <input type="number" class="form-control" id="webrtc-max-bitrate-text" value="0" min="0"
                               max="100000"/><br>
                        <label for="webrtc-low-qp-text">Low QP Threshold</label>
                        <input type="number" class="form-control" id="webrtc-low-qp-text" value="0" min="0"
                               max="999"/><br>
                        <label for="webrtc-high-qp-text">High QP Threshold</label>
                        <input type="number" class="form-control" id="webrtc-high-qp-text" value="0" min="0" max="999"/><br>
                        <input id="webrtc-params-submit" class="btn btn-primary btn-lg mt-3" type="button"
                               value="Apply">
                    </div>
                </div>
            </div>
            <div id="ShowFPS">
                <div class="settings-text">Show FPS</div>
                <label class="btn-overlay">
                    <input type="button" id="show-fps-button" class="overlay-button btn-flat" value="Toggle">
                </label>
            </div>
            <div id="MatchViewportResolution">
                <div class="settings-text">Match Viewport Resolution</div>
                <label class="tgl-switch">
                    <input type="checkbox" id="match-viewport-res-tgl" class="tgl tgl-flat">
                    <div class="tgl-slider"></div>
                </label>
            </div>
            <div id="Stats">
                <div class="settings-text">Show Stats</div>
                <label class="tgl-switch">
                    <input type="checkbox" id="show-stats-tgl" class="tgl tgl-flat" checked>
                    <div class="tgl-slider"></div>
                </label>
                <div id="statsContainer" class="statsContainer">
                    <div id="stats" class="stats"></div>
                </div>
            </div>
            <div id="LatencyTest">
                <Button onclick="sendStartLatencyTest()">Test Latency</Button>
                <div id="LatencyStatsContainer" class="statsContainer">
                    <div id=LatencyStats class="stats">No stats yet...</div>
                </div>
            </div>
        </div>
    </div>
    <!--	</div>-->
    <!--    <div id="imageTofile">-->
    <!--        <input type="button" onclick="screenImage()" style="width:  500px;height: 500px;background-color: red;position: absolute;-->
    <!--z-index: 100">-->
    <!--    </div>-->
    <div id="app">
    </div>
</div>
<!-- built files will be auto injected -->

<!--<script>-->
<!--    // 页面元素转图片-->
<!--    import html2canvas from "html2canvas"-->
<!--</script>-->
<script>
    function screenImage() {
        html2canvas(document.body).then((canvas) => {
            // toDataURL 图片格式转成 base64
            let dataURL = canvas.toDataURL("image/png")
            console.log('截图数据', dataURL)
            downloadImage(dataURL)
        })
    }

    //下载图片
    var downloadImage = function (url) {
        // 如果是在网页中可以直接创建一个 a 标签直接下载
        let a = document.createElement('a')
        a.href = url
        a.download = '截图'
        a.click()
    }

    // import html2canvas from "html2canvas"
    // window.addEventListener("load", () => {
    //   load() //webrtc
    // })
</script>
</body>
</html>
